<template>
	<view id="page">
		<nav-bar :vuiData="navbar"></nav-bar>
		<view class="local">
			<view class="col-9 lt">
				<text>当前位置：</text>
				<text class="loc">{{areaInfo.adrs}}</text>
			</view>
			<view class="col-3 rt">
				<view class="gps" @click="getLoc"><image src="../../static/20.png" mode="widthFix"></image><text>重新定位</text></view>
			</view>
		</view>
		<view class="adrs">
			<view class="adrs-select">
				<view class="lt">选择地区</view>
				<view class="rt" @click="openCity"><text>{{areaInfo.province}}{{areaInfo.city}}{{areaInfo.district}}</text><image src="../../static/38.png" mode="widthFix" lazy-load="true"></image></view>
			</view>
			<view class="adrs-box">
				<vui-city :mode="mode" :areaData="areaData" :isShow="isShow" @onCancle="onCancle" @onConfirm="onConfirm"></vui-city>
			</view>
		</view>
		<view class="btn" @click="bySure">确定</view>
	</view>
</template>
<script>
	import QQMapWX from '@/common/qqmap-wx-jssdk.js'
	import VuiCity from '@/components/default/vui-city.vue'
	import app from '@/common/index.js'
	export default {
		data() {
			return {
				navH: null,
				navbar: { // vui-navbar
					isBack: true, // 是否显示返回
					title: '城市选择', // 页面标题
				},
				areaInfo: {},  // 地区信息
				isShow: false,
				mode: 'three',
				areaData: [],
			}
		},
		onLoad() {
			this.navH = this.$store.state.navHeight;
			const locCache = this.$store.state.curLocation;
			if(app.isCObj(locCache)) {
				this.areaInfo = locCache;
			}else {
				this.getLoc();
			}
		},
		components: {
			VuiCity,
		},
		methods: {
			/**
			 * @des 获取地区数据
			 */
			getArea() {
				let areaData = uni.getStorageSync('areaData');
				if(areaData) {  //localStorage
					this.areaData = areaData;
					this.isShow = true;
				}else {  // Request
					app.request({
						url: 'entry/wxapp/AreaAll',
					}, (ret) => {
						const d = ret.data, areaData = [[],[],[]];
						d.forEach((item, index) => {
							if(item.level_type === '1') {
								areaData[0].push(item);
							}else if(item.level_type === '2') {
								areaData[1].push(item);
							}else if(item.level_type === '3') {
								areaData[2].push(item);
							}
						})
						this.areaData = areaData;
						uni.setStorageSync('areaData', areaData);
						this.isShow = true;
					})
				}
			},
			/**
			 * @des 获取当前定位
			 */
			getLoc() {
				app.loc(res => {
					if(res.status) {
						let ad_info = res.result.address_component, curLoction = {};
						curLoction = {
							"province": ad_info.province,
							"city": ad_info.city,
							"district": ad_info.district,
							"adrs": res.result.address,
						};
						this.areaInfo = curLoction;					
						this.$store.commit('setCurLocation', curLoction);
					}else {
						this.props.isShow = true;
					}
				})
			},
			/**
			 * 打开城市盒子
			 */
			openCity() {
				this.getArea();
			},
			/**
			 * @des 获取选择的城市数据
			 */
			onConfirm(val) {
				this.areaInfo.province = val[0].name;
				this.areaInfo.city = val[1].name;
				this.areaInfo.district = val[2].name;
				this.isShow = false;
			},
			/**
			 * @des 取消
			 */
			onCancle() {
				this.isShow = false;
			},
			/**
			 * @des 确定跳回前一页
			 */
			bySure() {
				this.$store.commit('setCity', this.areaInfo.city);
				uni.navigateBack({
					delta: 1
				})
			}
		}
	}
</script>

<style>
	.local {padding: 20upx; background-color: #fff;}
	.local text {display: block; line-height: 1;}
	.local .lt {text-align: left;}
	.local .lt .loc {margin-top: 15upx; font-size: 26upx; color: #666;}
	.local .rt {text-align: right;}
	.local .rt .gps {width: 72%; padding: 10upx 0; border-radius: 8px; text-align: center; background-color: #82d7d0;}
	.local .rt .gps image {width: 34upx;}
	.local .rt .gps text {margin-top: 10upx; font-size: 26upx; color: #fff;}
	.adrs {margin-top: 20upx; background-color: #fff;}
	.adrs-select {display: flex; padding: 20upx; border-bottom: 1px solid #eee;}
	.adrs-select .lt {flex: 1; text-align: left;}
	.adrs-select .rt {flex: 3; text-align: right;}
	.adrs-select .rt image {width: 18upx; margin-left: 20upx;}
	.btn {width: 50%; height: 70upx; border-radius: 5px; margin: 100upx auto; line-height: 70upx; color: #fff; background-color: #82d7d0;}
	
	.shade {
	    background-color: #ccc;
	    opacity: .6;
	    position: absolute;
	    display: none;
	    left: 0;
	    top: 0;
	    width: 100%;
	    height: 100%;
	}
	
	.show {
	    display: block;
	}
	
	.handle-bar {
	    padding: 0 15px;
	    height: 80rpx;
	    background-color: #eee;
	}
	
	.confirm {
	    text-align: right;
	}
	
	.selector-area {
	    height: 600rpx;
	    width: 100%;
	    background-color: #e6ebf3;
	    position: absolute;
	    bottom: 0;
	}
	
	.selector {
	    text-align: center;
	}
	
	.picker {
	    font-size: 32rpx;
	    height: 60rpx;
	    line-height: 60rpx;
	}
	
	.actived {
	    color: blue;
	}
	
	.area-selector {
	    height: 520rpx;
	}
	
	.white-shade {
	    position: absolute;
	    width: 100%;
	    height: 60rpx;
	    background-color: #fff;
	    left: 0;
	    margin-top: 240rpx;
	}
</style>
